<template>

	<div class="RightsDetail">
			<div class="RightsDetail-Body">
				<div class="RightsDetail-Body-Banner">
					<img src="static/img/Index/test.jpg" width="100%"/>
				</div>
				<div class="RightsDetail-Body-Title">
					万达请你1元看《复仇者联盟3无限战争之灭霸大大》
				</div>
				<div class="RightsDetail-Body-Detail">
					<div class="RightsDetail-Body-Detail-Left">
						权益有效期截止2118年5月40日
					</div>
					<div class="RightsDetail-Body-Detail-Right">
						<div class="RightsDetail-Body-Detail-Right-Icon">
							<img src="static/img/Index/view.png" width="100%"/>
						</div>
						<div class="RightsDetail-Body-Detail-Right-Num">
							1234
						</div>
					</div>
				</div>
				<div class="RightsDetail-Body-Division">
					<div class="RightsDetail-Body-Division-CirLeft">
						
					</div>
					<div class="RightsDetail-Body-Division-Line">
						
					</div>
					<div class="RightsDetail-Body-Division-CirRight">
						
					</div>
				</div>
				
				<div class="RightsDetail-Body-Code" ref='Code' style="height: auto;">
					<img src="static/img/Index/Code.png" width="100%"/>
				</div>
				<div class="RightsDetail-Body-Num">
					<span >{{CardNum | capitalize('0') }}</span>
					<span>{{CardNum | capitalize('1') }}</span>
					<span>{{CardNum | capitalize('2') }}</span>
					<span>{{CardNum | capitalize('3') }}</span>
				</div>
			</div>
	</div>

</template>

<script>
	export default {
		name: 'RightsDetail',
		data() {
			return {
			CodeHeight:0,
			CardNum:'2018052313472008',
			BodyWidth:'',
			BodyHeight:''
			}
		},
		created: function() {},
		methods: {

		},
		 mounted(){
		 	this.CodeHeight = this.$refs.Code.offsetWidth
		 },
		 filters: {
			capitalize: function(value, i) {
				
					return value.substring(i * 4, (parseInt(i) + 1) * 4)
				
			}
		}

	}
</script>

<style scoped>
	@import url("css/RightsDetail.css");
</style>